<template>
	<u-modal :show="visible" @update:show="visible = $event" :show-confirm-button="false" @close="onCancel"
		@cancel="onCancel" closeOnClickOverlay="true">
		<view class="container">
			<!-- 标题区域（居中显示） -->
			<view class="title-container">
				<text class="title-text">微信扫描二维码加入</text>
				<text class="room-id">房号: {{houseNumber}}</text>
			</view>

			<!-- 二维码区域（居中显示） -->
			<view class="qr-container">
				<image :src="qrCodeSrc" mode="aspectFit" class="qr-image"></image>
				<text class="qr-tip">邀请好友扫描以下二维码加入房间</text>
				<text class="qr-tip" style="size:8px;">点击弹框外可关闭弹窗</text>
			</view>

			<!-- 按钮区域（居中显示） -->
			<button class="share-button" open-type="share">转发给好友</button>
		</view>
	</u-modal>
</template>

<script setup>
	import {
		onMounted,
		ref,
		defineExpose
	} from 'vue';

	import webconst from '@/utils/webconst.js'
	import {
		getHouseQrCodeRequest
	} from '@/request/house.js'
	// ========== Props ==========
	const props = defineProps({
		maskClosable: {
			type: Boolean,
			default: false
		}
	})

	// ========== 内部状态 ==========
	const visible = ref(false)


	// ========== 事件回调 ==========
	const emit = defineEmits(['confirm', 'cancel'])

	let resolveFn = null
	let rejectFn = null


	const modalConfirmText = ref(props.confirmText)
	const code = ref('')
	const houseNumber = ref('')

	const onConfirm = () => {
		const data = {
			nickName: nickName.value,
			imgUrl: imgUrl.value
		}
		if (type.value == 0) {
			saveUserInfo(data);
		}
		emit('confirm', data)
		if (resolveFn) {
			resolveFn({
				confirmed: true,
				data
			})
			clean()
		}
	}

	const onCancel = () => {
		emit('cancel')
		if (rejectFn) {
			rejectFn({
				confirmed: false
			})
			clean()
		}
	}

	const clean = () => {
		resolveFn = null
		rejectFn = null
		visible.value = false // 隐藏弹窗
	}

	// ========== open 方法 ==========
	const open = (options = {}) => {
		// 合并传入的配置（仅支持部分动态修改）
		// 注意：props 是只读的，不能直接改，这里我们只改本地状态

		// ... 其他字段
		//必须要存在的code
		code.value = options.code;
		houseNumber.value = options.houseNumber
		//不用重复去拿
		if (qrCodeSrc.value == ""||qrCodeSrc.value == null) {
			getHouseQrCode(code.value);
		}

		// 显示弹窗
		visible.value = true

		// 返回 Promise
		return new Promise((resolve, reject) => {
			resolveFn = resolve
			rejectFn = reject
		})
	}


	// ========== 业务相关 ==========
	const qrCodeSrc = ref(null);
	//获取房间二维码code
	const getHouseQrCode = (code) => {
		getHouseQrCodeRequest({
			"code": code
		}).then((res) => {
			if (res.code == 0) {
				qrCodeSrc.value = webconst.img_prefix + res.data.sharingQrCodeImg;
			}
			console.log('成功', res);
		}).catch((err) => {
			console.error('失败', err);
		});
	}
	// ========== 暴露方法 ==========
	defineExpose({
		open
	})
</script>

<style>
	/* 整个页面垂直居中 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 确保撑满屏幕高度 */
		padding: 20px;

	}

	/* 标题区域（垂直居中） */
	.title-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 内部文字水平居中 */
		margin-bottom: 20px;
	}

	.title-text {
		font-size: 16px;
		color: #333;
		margin-bottom: 5px;
	}

	.room-id {
		font-size: 24px;
		font-weight: bold;
		color: #ff6b6b;
		margin-top: 5px;
	}

	/* 二维码区域（垂直居中） */
	.qr-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30px;
	}

	.qr-image {
		width: 200px;
		height: 200px;
		border-radius: 10px;
		background-color: #fff;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		margin-bottom: 10px;
	}

	.qr-tip {
		font-size: 14px;
		color: #999;
		text-align: center;
	}

	/* 按钮（居中显示） */
	.share-button {
		width: 80%;
		height: 44px;
		background-color: #ff6b6b;
		color: white;
		border-radius: 22px;
		font-size: 16px;
		margin-top: 10px;
		box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
	}
</style>